<template>
	<div class="app-container">
		<el-form :model="data.info" :label-width="language == 'en' ? '150' : '120'" ref="ruleFormRef">
			<el-collapse v-model="data.activeName">
				<!-- 主体信息 -->
				<el-collapse-item :name="1" class="info">
					<template #title>
						<div class="h-8 text-base pl-4 mt-2 font-semibold relative text-[#fafafa]">{{
							$t('machine.configs.subjectInfo') }}</div>
					</template>
					<template #default>
						<div class="w-full flex flex-wrap">
							<div class="w-1/3">
								<el-form-item :label="$t('system.message.official') + ':'" prop="wx_id" class="w-11/12">
									<el-select v-model="data.info.wx_id" :placeholder="$t('message.pleaseSelect')">
										<el-option v-for="item in data.wxlist" :key="item.id"
											:label="item.id + ' - ' + item.wx_name" :value="item.id" />
									</el-select>
								</el-form-item>
							</div>

							<div class="w-1/3">
								<el-form-item :label="$t('system.message.toLink') + ':'" prop="url" class="w-11/12">
									<el-input v-model="data.info.url" :placeholder="$t('message.pleaseEnter')" />
								</el-form-item>
							</div>

							<div class="w-1/3">
								<el-form-item :label="$t('strategy.payee.state') + ':'" prop="status" class="w-11/12">
									<el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
										<el-option :label="$t('public.enable')" :value="1" />
										<el-option :label="$t('public.disable')" :value="2" />
									</el-select>
								</el-form-item>
							</div>

							<div class="w-1/3">
								<el-form-item :label="$t('system.mail.type') + ':'" prop="template_type"
									class="w-11/12">
									<el-select v-model="data.info.template_type"
										:placeholder="$t('message.pleaseSelect')">
										<el-option v-for="item in data.wxtype" :key="item.value" :label="item.label"
											:value="item.value" />
									</el-select>
								</el-form-item>
							</div>

							<div class="w-1/3">
								<el-form-item :label="$t('presets.info.name') + ':'" prop="template_name"
									class="w-11/12">
									<el-input v-model="data.info.template_name"
										:placeholder="$t('message.pleaseEnter')" />
								</el-form-item>
							</div>

							<div class="w-1/3">
								<el-form-item :label="$t('public.template') + 'ID:'" prop="template_id" class="w-11/12">
									<el-input v-model="data.info.template_id"
										:placeholder="$t('message.pleaseEnter')" />
								</el-form-item>
							</div>

						</div>
					</template>
				</el-collapse-item>
				<!-- 小程序信息 -->
				<el-collapse-item :name="2" class="basis">
					<template #title>
						<div class="h-8 text-base pl-4 mt-2 font-semibold relative text-[#fafafa]">
							{{ $t('system.message.ProgramInf') }}</div>
					</template>
					<template #default>
						<div class="w-full flex flex-wrap">
							<div class="w-1/3">
								<el-form-item :label="$t('system.message.Mini') + 'appid:'" prop="appid"
									class="w-11/12">
									<el-input v-model="data.miniprogram.appid"
										:placeholder="$t('message.pleaseEnter')" />
								</el-form-item>
							</div>
							<div class="w-1/3">
								<el-form-item :label="$t('system.message.path') + ':'" prop="pagepath" class="w-11/12">
									<el-input v-model="data.miniprogram.pagepath"
										:placeholder="$t('message.pleaseEnter')" />
								</el-form-item>
							</div>
						</div>
					</template>
				</el-collapse-item>

				<!-- 组织架构 -->
				<el-collapse-item :name="3" class="buy">
					<template #title>
						<div class="h-8 text-base pl-4 mt-2 font-semibold relative text-[#fafafa]">
							{{ $t('machine.infos.organiz') }}</div>
					</template>
					<template #default>
						<div class="w-full flex flex-wrap">
							<div class="w-1/3">
								<el-form-item :label="$t('machine.infos.organiz') + ':'" prop="ao_id" class="w-11/12">
									<el-cascader v-model="data.info.ao_id" :props="organinfo" class="w-full" clearable
										:placeholder="$t('message.pleaseSelect')" />
								</el-form-item>
							</div>
						</div>
					</template>
				</el-collapse-item>

				<!-- 参数类别 -->
				<el-collapse-item :name="4" class="transaction">
					<template #title>
						<div class="h-8 text-base pl-4 mt-2 font-semibold relative text-[#fafafa]">{{
							$t('system.message.param') }}</div>
					</template>
					<template #default>
						<div class="pb-4 mb-2" v-for="item, key of data.body">
							<div class="w-full relative flex flex-nowrap ml-2 mt-4">
								<div class="w-3/12">
									<el-form-item :label="$t('system.message.infoTitle') + ':'" prop="name"
										class="w-full">
										<el-select v-model="item.name" :placeholder="$t('message.pleaseSelect')"
											@change="getvalue($event, item)">
											<el-option v-for="ime in data.fieldlist" :key="ime.value" :label="ime.label"
												:value="ime.value" />
										</el-select>
									</el-form-item>
								</div>
								<div class="w-3/12 mx-6">
									<el-form-item :label="$t('system.message.dynamic') + ':'" prop="value"
										class="w-full">
										<el-input v-model="item.value" disabled/>
									</el-form-item>
								</div>
								<div class="w-3/12 mx-6">
									<el-form-item :label="$t('system.message.param') + ':'" prop="field" class="w-full">
										<el-input v-model="item.field" :placeholder="$t('message.pleaseEnter')" />
									</el-form-item>
								</div>
								<div class="w-2/12 ml-4 mt-1">
									<el-link v-if="data.body.length == key + 1" type="success" :underline="false"
										@click="addbody()">{{ $t('public.add') }}</el-link>
									<el-link v-if="data.body.length != 1 && data.body.length != key + 1" type="danger"
										:underline="false" @click="dels(key)">{{ $t('public.del') }}</el-link>
								</div>
							</div>
						</div>
					</template>
				</el-collapse-item>
			</el-collapse>
			<div class="w-full text-center mt-4 ml-6">
				<div class="inline-block">
					<el-button type="primary" size="small" @click="submit">
						<template #default>
							<span class="text-sm">{{ $t('public.save') }}</span>
						</template>
					</el-button>
					<el-button size="small" @click="cancell">
						<template #default>
							<span class="text-sm">{{ $t('public.cancel') }}</span>
						</template>
					</el-button>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import arrange from '@/utils/hierarchy';
import exportData from '@/utils/replace';
import { getwxList, addtemplate } from '@/api/system';
import { useRouter } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let router = useRouter()

let data = reactive({
	activeName: [1, 2, 3, 4],
	wxlist: [], // 公众号
	wxtype: [ // 模板类型
		{ label: $t('mock.onlineStatus'), value: 'online' },
		{ label: $t('mock.outStock'), value: 'understock' },
		{ label: $t('mock.saleNotices'), value: 'sale' },
		{ label: $t('mock.abnormal'), value: 'tException' },
		{ label: $t('mock.failure'), value: 'mFault' },
		{ label: $t('mock.abnormality'), value: 'unitException' }
	],
	fieldlist: [], // 替换字符
	body: [], // 类别信息
	info: { // 主体信息
		wx_id: '',
		template_name: '',
		template_type: 'online',
		template_id: '',
		url: '',
		miniprogram: '',
		body: '',
		status: 1,
		ao_id: '',
	},
	miniprogram: { // 小程序跳转
		appid: '',
		pagepath: '',
	},
})

// 获取接口信息
let geturl = () => {
	getwxList().then(res => {
		if (res.state == 200) {
			data.wxlist = res.data
		}
	})

	data.body.push({
		name: '',
		value: '',
		field: ''
	})

	data.fieldlist = exportData.exportData(1)
}

// 获取选中的类别
let getvalue = (e, k) => {
	let type = true
	for (let item of data.body) {
		if (item.value == e) {
			type = false
		}
	}
	if (type) {
		k.value = e.replace(/\s+/g, '')
		k.value = k.value.replace(/"/g, '')
	} else {
		k.name = ''
		ElMessage({
			message: $t('message.pleaseDuplicateTitle'),
			type: 'error'
		})
	}

}

// 添加参数类别
let addbody = (e) => {
	if (data.body.length >= 5) {
		ElMessage({
			message: $t('message.maxNum'),
			type: 'error'
		})
		return
	}
	data.body.push({
		name: '',
		value: '',
		field: ''
	})
}

// 删除参数类别
let dels = (e) => {
	data.body.splice(e, 1)
}

// 管理组织
let organinfo = reactive({
	lazy: true,
	multiple: false,
	emitPath: true,
	checkStrictly: true,
	async lazyLoad(node, resolve) {
		let nodes = await arrange.arrange(2, node.data.value);
		resolve(nodes);
	}
});

// 保存
let submit = () => {
	let bodys = []
	let arr = []
	if (data.info.wx_id == '') {
		ElMessage({
			message: $t('message.pleaseOfficial'),
			type: 'error'
		})
		return
	}

	if (data.info.template_name == '') {
		ElMessage({
			message: $t('message.pleaseEnterTempName'),
			type: 'error'
		})
		return
	}

	if (data.info.template_id == '') {
		ElMessage({
			message: $t('message.pleaseEnterTempId'),
			type: 'error'
		})
		return
	}

	for (let item of data.body) {
		if (item.name != '' && item.value != '' && item.field != '') {
			bodys.push(item)
		}
	}

	if (bodys.length == 0) {
		ElMessage({
			message: $t('message.pleaseEnterParam'),
			type: 'error'
		})
		return
	}

	let obj = {
		wx_id: data.info.wx_id,
		template_name: data.info.template_name,
		template_type: data.info.template_type,
		template_id: data.info.template_id,
		url: data.info.url,
		status: data.info.status,
		ao_id: data.info.ao_id[data.info.ao_id.length - 1],
		miniprogram: JSON.stringify(data.miniprogram),
		body: '',
	}

	for (let item of bodys) {
		for (let ime of data.fieldlist) {
			let imeValue = ime.value.replace(/\s+/g, '')
			let value = imeValue.replace(/"/g, '')
			if (item.value == value) {	
				arr.push({
					[ime.label]: {
						value: value,
						field: item.field
					}
				})
			}
		}
	}
	obj.body = JSON.stringify(arr)

	addtemplate(obj).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.addSuccess'),
				type: 'success'
			});
			router.back()
			return;
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		});
	})
}

// 取消
let cancell = () => {
	for (let key in data.info) {
		if (key != 'template_type' && key != 'status') {
			data.info[key] = ''
		}
	}
	data.info.template_type = 'online'
	data.info.status = 1
	data.body = [{
		name: '',
		value: '',
		field: ''
	}]
	router.back()
}

geturl()

</script>
<style type="text/css">
.info .el-collapse-item__header {
	background: rgba(75, 141, 284, 0.8);
}

.info .el-collapse-item__wrap {
	border: 1px solid rgba(75, 141, 284, 0.4);
}

.basis .el-collapse-item__header {
	background: rgba(79, 166, 196, 0.8);
	margin-top: 20px;
}

.basis .el-collapse-item__wrap {
	border: 1px solid rgba(79, 166, 196, 0.4);
}

.buy .el-collapse-item__header {
	background: rgba(255, 97, 3, 0.8);
	margin-top: 20px;
}

.buy .el-collapse-item__wrap {
	border: 1px solid rgba(255, 97, 3, 0.4);
}

.transaction .el-collapse-item__header {
	background: rgba(133, 191, 79, 0.8);
	margin-top: 20px;
}

.transaction .el-collapse-item__wrap {
	border: 1px solid rgba(133, 191, 79, 0.4);
}

.el-collapse-item__content {
	padding-top: 20px;
	padding-bottom: 0;
}

.el-collapse-item__arrow {
	color: #fafafa;
}
</style>